import React, { useEffect } from 'react'
import { IProject } from '../../../starter/model/interfaces'
import style from './cardProjectSmall.module.scss'
import { Button, ButtonProps } from 'antd'
import PersonContactSet from '../PersonContactSet/PersonContactSet'
import { EditOutlined } from '@ant-design/icons'
import { useUpdateProjectMutation } from '../../../starter/api/projectsApi'

import { store } from '../../../starter/redux/store'
import CreateProject from '../CreateProject/CreateProject'
import { useActions } from '../../../starter/hooks/actions'
import { useDrag } from 'react-dnd'

type TCardProject = {
  project: IProject
}
export default function CardProjectSmall ({project}: TCardProject) {

  const [updateProject, {isLoading: isLoadingUpdateProject, isSuccess: isSuccessUpdateProject, isError: isErrorUpdateProject}] = useUpdateProjectMutation()

  const {onShowModal, setModalData, setTmpProject} = useActions()

  useEffect(() => {
    onShowModal(false)
  }, [isSuccessUpdateProject])

  const [monitor,projectRef] = useDrag({
    type: 'project',
    item: project,
    collect: monitor => monitor
  })

  const editProject = () => {
    onShowModal(true)
    setTmpProject({...project})
    const buttonSet : ButtonProps[] = [
      {
        type: 'primary',
        onClick: () => {
          const {project} = {...store.getState().tmp}
          if (project) {
            updateProject(project)
          }
        },
        children: 'Ok'
      },
      {
        onClick: () => onShowModal(false),
        children: 'Cancel'
      }
    ]
    setModalData({
      title: 'Введите данные проекта',
      content: <CreateProject/>,
      buttonSet,
      footer: buttonSet.map((item, index) => <Button key={index} {...item}/>)
    })
  }

  return (
    <div
      ref={projectRef}
    >
      <div className={style.wrapper}>
        <div className={style.title}>
          <div>
            {project.title}
          </div>
          <EditOutlined style={{cursor: 'pointer'}} onClick={() => {editProject()}}/>
        </div>
        <div className={style.code}>{project.code}</div>
        <div className={style.responsible}>
          <div className={style.card}>
            {
              project.manager &&
              <PersonContactSet person={project.manager}/>
            }
          </div>
          <div className={style.card}>
            {
              project.responsibleEmployee &&
              <PersonContactSet person={project.responsibleEmployee}/>
            }
          </div>
        </div>
        <div className={style.progressBar}>
        </div>
      </div>
    </div>
  )
}
